<template>
    <div>
        <!-- 外站售票明细 -->
        <div class="container">
            <!-- 表单 -->
            <el-form :inline="true" :model="formList" class="ticketForm" id="outTicketingDetail">
                <el-form-item label="售票时间起">
                    <el-date-picker type="date" size="mini" class="minipt"
                                    v-model="formList.startDate" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                    至
                    <el-date-picker type="date" size="mini" class="minipt" v-model="formList.endDate"
                                    value-format="yyyy-MM-dd HH:mm:ss">

                    </el-date-picker>
                </el-form-item>
                <el-form-item label="线路" class="minipt">
                    <!--<el-input size="mini" v-model="formList.query1" class="inp"></el-input>-->
                    <el-autocomplete
                            class="inp"
                            size="mini"
                            v-model="formList.lineName"
                            :fetch-suggestions="querySearchLine"
                            @select="handleSelect"
                    ></el-autocomplete>
                </el-form-item>
                <el-form-item label="班次号">
                    <el-input size="mini" v-model="formList.busid" class="inp"></el-input>
                </el-form-item>
                <el-form-item label="已检票" class="minisel">
                    <el-select size="mini" v-model="formList.checked">
                        <el-option v-for="(item,index) in  YesOrNoList"
                                   :key="index" :label="item.key" :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="类型">
                    <el-select size="mini" v-model="formList.sale_type">
                        <el-option v-for="(item) in TicketOutType"
                                   :key="item.key"
                                   :label="item.label"
                                   :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="班次日期">
                    <el-date-picker type="date" size="mini" class="minipt" value-format="yyyy-MM-dd"
                                    v-model="formList.BusStartDate" :clearable="true">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="票号" class="minipt">
                    <el-input size="mini" v-model="formList.billno"></el-input>
                </el-form-item>
                <el-form-item label="条形码">
                    <el-input size="mini" v-model="formList.barcode"></el-input>
                </el-form-item>
                <el-form-item label="票状态">
                    <el-select size="mini" v-model="formList.status">
                        <el-option v-for="(item,index) in TicketStatusDef"
                                   :key="index"
                                   :label="item.key"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="携 童" lable-width="55px">
                    <el-select size="mini" v-model="formList.is_enfant">
                        <el-option v-for="(item,index) in YesOrNoList"
                                   :key="index"
                                   :label="item.key"
                                   :value="item.value"

                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="支付方式" class="payWay">
                    <el-select size="mini" v-model="formList.pay_type" @select="handleSelect">
                        <el-option v-for="(item,index) in PayType"
                                   :key="index"
                                   :label="item.key"
                                   :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="售票点">
                    <el-select size="mini" v-model="formList.owner_org">
                        <el-option v-for="(item) in BusStation"
                                   :key="item.id"
                                   :label="item.name"
                                   :value="item.no"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <button class="check-btn rf" type="button" @click="Querydetail">
                    <img src="../../assets/imgs/operation_btn_icon_chaxun_default.png" alt="" class="btn-img">查询
                </button>

            </el-form>
            <!-- 表格 -->
            <el-table style="width: 100%" :data="tableData" :show-summary="true" :summary-method="getSummaries">
                <el-table-column prop="sale_agent" label="售票点">
                </el-table-column>
                <el-table-column prop="ticketno" label="票号"></el-table-column>
                <el-table-column prop="pricetype" label="票型"></el-table-column>
                <el-table-column prop="statusname" label="状态"></el-table-column>
                <el-table-column prop="price" label="票价"></el-table-column>
                <el-table-column prop="is_enfant" label="携童"></el-table-column>
                <el-table-column prop="bus_date" label="班次日期"></el-table-column>
                <el-table-column prop="bus_time" label="时间"></el-table-column>
                <el-table-column prop="stname" label="目的地"></el-table-column>
                <el-table-column prop="busid" label="班次号"></el-table-column>
                <el-table-column prop="seatno" label="座位"></el-table-column>
                <el-table-column prop="seller_name" label="售票员"></el-table-column>
                <el-table-column prop="create_time" label="出票时间"></el-table-column>
                <el-table-column prop="barcode" label="条码"></el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagination">
                <el-pagination
                        :page-sizes="[100, 200, 300, 400]"
                        :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="400">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
    import qs from "qs";

    export default {


        data() {
            return {


                tableData: [],

                formList: {
                    startDate: "",
                    endDate: "",
                    lineName: "",
                    busid: "",
                    checked: "",
                    sale_type: "",
                    BusStartDate: "",
                    billno: "",
                    barcode: "",
                    is_enfant: "",
                    create_user: "",
                    pay_type: "",
                    owner_org: "",
                    status: "",
                },

                create_userid: "",

                lineNameid: "",

                YesOrNoList: [],
                PayType: [],
                TicketStatusDef: [],
                BusLineList: [],
                TicketSellerList: [],
                BusStation: [],

                TicketOutType: [
                    {
                        key: 0,
                        label: "不限",
                        value: "0",
                    },
                    {
                        key: 1,
                        label: "窗口售票",
                        value: "1",
                    },
                    {
                        key: 2,
                        label: "窗口取票",
                        value: "2",
                    },
                    {
                        key: 3,
                        label: "自助机售票",
                        value: "3",
                    },
                    {
                        key: 4,
                        label: "自助机取票",
                        value: "4",
                    },
                ],


            };
        },
        methods: {

            //线路搜索框建议数据
            querySearchLine(queryString, cb) {
                var restaurants = this.BusLineList;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            }, createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value);
                };
            },

            handleSelect(item) {
                console.log(item);
            },


            // 加载系统用户列表数据
            loadUserList() {
                this.$http.post("/sys/user/listWithSpell")
                    .then(data => {
                        for (var item of data.data) {
                            this.TicketSellerList.push({
                                value: item.name,
                                id: item.id
                            });
                        }
                        // console.log(this.TicketSellerList);

                    });
            },

            //加载系统线路列表数据
            loadLineList() {
                this.$http.post("/sch/data/line/listWithSpell")
                    .then(data => {
                            // console.log("11a");
                            for (var item of data.data) {
                                this.BusLineList.push({
                                    value: item.name,
                                    id: item.id
                                });
                            }
                            // console.log(this.BusLineList);
                        }
                    )
            },
            //加载车票列表
            getAvaliableTks() {
                this.$http.post("/tks/sale/getAvaliableTks")
                    .then(data => {

                            // console.log(data);
                        }
                    )
            },

            //加载打印机
            printers() {
                this.$http.post("/print/tempalate/printers")
                    .then(data => {

                        }
                    )
            },

            //加载支付方式列表
            getPayType() {
                this.$http.post("/common/constant/getPayType")
                    .then(data => {
                            this.PayType = data.data;
                        }
                    )
            },

            //加载是否检票列表
            getYesOrNo() {
                this.$http.post("/common/constant/getYesOrNo")
                    .then(data => {

                            this.YesOrNoList = data.data;
                            this.formList.checked = data.data[0].key;
                        }
                    )
            },

            //加载票状态列表
            getStatusDef() {
                this.$http.post("/tks/common/getStatusDef")
                    .then(data => {

                            this.TicketStatusDef = data.data
                            this.formList.status = data.data[0].key;
                        }
                    )
            },
            //加载售票点列表数据
            nameList() {
                this.$http.post("/sys/org/nameList")
                    .then(data => {
                            console.log(data);
                            for (var a of  data.data) {
                                this.BusStation.push({
                                    no: a.no,
                                    name: a.name,
                                    id: a.id,

                                })

                            }
                            this.formList.owner_org = data.data[0].name;
                        }
                    )
            },


            //选择登陆点
            setLoginOrg() {
                this.$http.post(
                    ""
                ).then(data => {
                    console.log(data);
                })
            },


            //查询按钮获取数据
            Querydetail() {
                this.tableData = [];
                var that = this;
                var params = '[{"field":"tbc.create_org","op":"nq","value":"353"},' +
                    '{"field":"tks_ticket.create_time","op":"dge","value":"' + that.formList.startDate + '"},' +
                    '{"field":"tks_ticket.create_time","op":"dle","value":"' + that.formList.endDate + '"},' +
                    '{"field":"tks_ticket.busid","op":"eq","value":"' + that.formList.busid + '"},' +
                    '{"field":"bus_plan.line_id","op":"eq","value":"' + this.lineNameid + '"},' +
                    // '{"field":"tks_ticket.bus_date","op":"eq","value":"' + that.formList.BusStartDate + '"},' +
                    '{"field":"tbc.checked","op":"eq","value":"' + that.formList.checked + '"},' +
                    '{"field":"tks_ticket.ticketno","op":"eq","value":"' + that.formList.billno + '"},' +
                    '{"field":"tks_ticket.barcode","op":"eq","value":"' + that.formList.barcode + '"},' +
                    '{"field":"tks_ticket.status","op":"eq","value":"' + that.formList.status + '"},' +
                    '{"field":"tks_ticket.is_enfant","op":"eq","value":"' + that.formList.is_enfant + '"},' +
                    '{"field":"tbc.create_org","op":"eq","value":"' + that.formList.create_org + '"}]';

                this.$http.post("/query/tks/detailFromAgents/list", qs.stringify(
                    {    //过滤规则全部字段
                        filterRules: params,
                        'page': '1',
                        'rows': '50',
                        'sort': 'create_time',
                        'order': 'desc',

                    })
                )
                    .then(data => {
                        console.log(data);
                        for (var a of data.data.list) {
                            this.tableData.push(
                                {
                                    sale_agent: a.sale_agent,
                                    ticketno: a.ticketno,
                                    pricetype: a.pricetype,
                                    statusname: a.statusname,
                                    price: a.price,
                                    is_enfant: a.is_enfant,
                                    bus_date: a.bus_date,
                                    bus_time: a.bus_time,
                                    stname: a.stname,
                                    busid: a.busid,
                                    seller_name: a.seller_name,
                                    seatno: a.seatno,
                                    create_time: a.create_time,
                                    barcode: a.barcode,

                                })
                        }

                    })

            },

            //合计函数
            getSummaries(param) {
                const {columns, data} = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '合计';
                        return;
                    }
                    if (index === 10) {
                        sums[index] = '';
                        return;
                    }
                    if (index === 9) {
                        sums[index] = '';
                        return;
                    }
                    if (index === 13) {
                        sums[index] = '';
                        return;
                    }
                    if (index === 1) {
                        sums[index] = this.tableData.length;
                        return;
                    }
                    const values = data.map(item => Number(item[column.property]));
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[index] += '';
                    } else {
                        sums[index] = '';
                    }
                });

                return sums;
            },

        },
        watch: {

            //监听线路名数据变化
            "formList.lineName": {
                handler(curVal, oldVal) {
                    console.log(curVal, oldVal);
                    if (this.formList.lineName == "") {
                        this.lineNameid = "";
                    } else {
                        for (var item of this.BusLineList) {
                            if (this.formList.lineName == item.value) {
                                this.lineNameid = item.id;
                                break;
                            } else {
                                this.lineNameid = "";
                            }
                        }
                        console.log(this.lineNameid)
                    }
                },
                deep: true
            },

            //监听线路名数据变化
            "formList.lineName": {
                handler(curVal, oldVal) {
                    console.log(curVal, oldVal);
                    if (this.formList.lineName == "") {
                        this.lineNameid = "";
                    } else {
                        for (var item of this.BusLineList) {
                            if (this.formList.lineName == item.value) {
                                this.lineNameid = item.id;
                                break;
                            } else {
                                this.lineNameid = "";
                            }
                        }
                        console.log(this.lineNameid)
                    }
                },
                deep: true
            },

        },


        mounted() {
            console.log("custom");
            this.loadUserList();
            this.loadLineList();
            this.getAvaliableTks();
            this.getStatusDef();
            this.getYesOrNo();
            this.getPayType();
            this.printers();
            this.nameList();

        }
    }
</script>
<style scoped src='../../assets/css/check/outTicketingDetail.css'>
</style>
